<template>
	<view>
		<custom-header title="投诉反馈" />
		<scroll-view
			:scroll-y="true" 
			scroll-with-animation
			:style="{height:'calc(100vh - 128rpx - 5rpx - '+statusBarHeight+'px)'}"
			class="scroll_content_wrap">
				<view class="_wrap">
					<view class="form_wrap">
						<viwe class="type">
							<view class="label">
								反馈类型<text class="red">*</text>
							</view>
							<view class="value">
								<view 
									class="list" 
									:class="{'active':item.id == type}"
									v-for="(item,index) in typeList" 
									:key="index"
									@click="type = item.id"> {{ item.name }} </view>
							</view>
						</viwe>
						<view class="desc_wrap">
							<up-textarea
								v-model="feedbackReason" 
								placeholder="请详细描述您的投诉内容，我们会认真处理。"
								border="none"
								style="padding:25rpx;background: #F8F8F8;border-radius: 20rpx;"
								placeholderStyle="font-size:24rpx;color:#AAAAAA">
							</up-textarea>
						</view>
					</view>
					<view class="form_wrap image_wrap">
						<view class="label">上传凭证</view>
						<view class="upload_wrap">
							<custom-upload v-model="imageList" :maxCount="9"></custom-upload>
						</view>
						<view class="image_hint">
							最多可上传9张图片、支持jpg、png格式
						</view>
					</view>
				</view>
		</scroll-view>
		<view class="footer_btn_wrap">
			<view class="btn_wrap">
				<button
					size="default" 
					type="default" 
					class="btn confirm" 
					hover-class="confirm_hover" 
					:hover-stay-time="200" 
					@click="handleConfirm"
					:disabled="btnLoading"
					:loading="btnLoading">提交</button>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { computed, ref , onMounted} from 'vue';
	import { useStore } from 'vuex';
	const store = useStore();
	const statusBarHeight = computed(()=>{
		return store.getters.statusBarHeight;
	});
	
	const type = ref(1)
	const typeList = ref([
		{ id:1,name:'售后' },
		{ id:2,name:'其他' },
	])
	const feedbackReason = ref('')
	const imageList = ref([])
	
	// 确认
	const btnLoading = ref(false)
	const handleConfirm = ()=>{
		btnLoading.value = true
		setTimeout(()=>{
			btnLoading.value = false
		},500)
	}
</script>

<style lang="scss">
	._wrap{
		padding: 0 25rpx;
	}
	.form_wrap{
		border-radius: 20rpx;
		background: #FFFFFF;
		padding: 0 25rpx;
		margin-top: 20rpx;
		.label{
			font-weight: bold;
			font-size: 28rpx;
		}
		.type{
			display: flex;
			align-items: center;
			color: #333;
			padding-top: 25rpx;
			.value{
				display: flex;
				align-items: center;
				.list{
					width: 140rpx;
					text-align: center;
					height: 48rpx;
					line-height: 48rpx;
					border-radius: 168rpx;
					background: #F7F7F7;
					border: 1px solid #F7F7F7;
					color: #333;
					font-size: 24rpx;
					margin-left: 30rpx;
					&.active{
						background: #FCEEF0;
						border: 1px solid #F5564D;
						color: #F5564D;
					}
				}
			}
		}
		.desc_wrap{
			padding: 25rpx 0;
		}
		.image_hint{
			font-size: 22rpx;
			color: #AAA;
		}
	}
	.image_wrap{
		padding: 25rpx;
	}
	.upload_wrap{
		padding: 25rpx 0;
	}
</style>
